<template>
    <div class="client-form-container">
        <el-card class="form-card" shadow="hover">
            <el-collapse v-model="activeNames" accordion>
                <!-- 基础信息部分 -->
                <el-collapse-item title="基础信息" name="1">
                    <div class="form-section">
                        <el-form ref="form" :model="form" label-width="160px" label-position="left">
                            <!-- 第一行 -->
                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="客户名称" prop="name" required>
                                        <el-input v-model="form.name" placeholder="请输入客户名称" clearable
                                            prefix-icon="el-icon-office-building" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="维护人" prop="uid" required>
                                        <el-select v-model="form.uid" placeholder="请选择维护人" filterable
                                            class="full-width-select">
                                            <el-option v-for="item in userList" :key="item.id" :label="item.username"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <!-- 第二行 -->
                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="地址" prop="address">
                                        <el-input v-model="form.address" placeholder="请输入详细地址" clearable
                                            prefix-icon="el-icon-location-outline" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系电话" prop="phone">
                                        <el-input v-model="form.phone" placeholder="请输入联系电话" clearable
                                            prefix-icon="el-icon-phone-outline" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <!-- 分类信息 -->
                            <div class="section-title">
                                <i class="el-icon-collection-tag"></i>
                                <span>分类信息</span>
                            </div>

                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="所属行业" prop="trade">
                                        <el-select v-model="form.trade" placeholder="请选择所属行业" clearable
                                            class="full-width-select">
                                            <el-option label="地产" value="地产" />
                                            <el-option label="建筑" value="建筑" />
                                            <el-option label="制造" value="制造" />
                                            <el-option label="商贸" value="商贸" />
                                            <el-option label="其他" value="其他" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="经营范围" prop="business_scope">
                                        <el-input v-model="form.business_scope" placeholder="请输入经营范围" clearable
                                            prefix-icon="el-icon-tickets" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <!-- 帐务信息 -->
                            <div class="section-title">
                                <i class="el-icon-wallet"></i>
                                <span>帐务信息</span>
                            </div>

                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="开户银行" prop="bank">
                                        <el-input v-model="form.bank" placeholder="请输入开户银行" clearable
                                            prefix-icon="el-icon-bank-card" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="银行账户" prop="bank_account">
                                        <el-input v-model="form.bank_account" placeholder="请输入银行账户" clearable
                                            prefix-icon="el-icon-coin" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <!-- 税务信息 -->
                            <div class="section-title">
                                <i class="el-icon-document"></i>
                                <span>税务信息</span>
                            </div>

                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="主管税务机关" prop="zgswjg">
                                        <el-input v-model="form.zgswjg" placeholder="请输入主管税务机关" clearable
                                            prefix-icon="el-icon-office-building" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="纳税人识别号" prop="nsrsbh">
                                        <el-input v-model="form.nsrsbh" placeholder="请输入纳税人识别号" clearable
                                            prefix-icon="el-icon-document-copy" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="企业所得税征收方式" prop="qysdszsfs">
                                        <el-select v-model="form.qysdszsfs" placeholder="请选择征收方式" clearable
                                            class="full-width-select">
                                            <el-option label="查账" value="查账" />
                                            <el-option label="核定" value="核定" />
                                            <el-option label="其他" value="其他" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="增值税计税方式" prop="zzsjsfs">
                                        <el-select v-model="form.zzsjsfs" placeholder="请选择计税方式" clearable
                                            class="full-width-select">
                                            <el-option label="一般纳税人" value="一般纳税人" />
                                            <el-option label="简易计税" value="简易计税" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="一般纳税人" prop="is_ybnsr">
                                        <el-radio-group v-model="form.is_ybnsr">
                                            <el-radio label="否" border />
                                            <el-radio label="是" border />
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="个人股东" prop="is_grgd">
                                        <el-radio-group v-model="form.is_grgd">
                                            <el-radio label="无" border />
                                            <el-radio label="有" border />
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="30">
                                <el-col :span="12">
                                    <el-form-item label="所得税汇总纳税" prop="is_sdshzns">
                                        <el-radio-group v-model="form.is_sdshzns">
                                            <el-radio label="否" border />
                                            <el-radio label="是" border />
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-collapse-item>

                <!-- 联系人信息部分 -->
                <el-collapse-item title="联系人信息" name="2">
                    <div class="contact-section">
                        <div class="contact-header">
                            <div class="tip-box">
                                <i class="el-icon-info"></i>
                                <span class="tip-text">提示：系统默认第一行为主联系人</span>
                            </div>
                            <div class="action-buttons">
                                <el-tooltip content="添加联系人" placement="top">
                                    <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                        @click="addContact" />
                                </el-tooltip>
                                <el-tooltip content="删除联系人" placement="top">
                                    <el-button type="danger" icon="el-icon-minus" circle size="mini"
                                        @click="removeContact" />
                                </el-tooltip>
                            </div>
                        </div>

                        <el-table :data="form.contacts" border style="width: 100%" class="contact-table"
                            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
                            <el-table-column prop="name" label="姓名" width="180">
                                <template v-slot="scope">
                                    <el-input v-model="scope.row.name" placeholder="请输入姓名" clearable
                                        prefix-icon="el-icon-user" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="appellation" label="称呼" width="120">
                                <template v-slot="scope">
                                    <el-input v-model="scope.row.appellation" placeholder="请输入称呼" clearable
                                        prefix-icon="el-icon-chat-dot-round" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="position" label="岗位" width="150">
                                <template v-slot="scope">
                                    <el-input v-model="scope.row.position" placeholder="请输入岗位" clearable
                                        prefix-icon="el-icon-suitcase" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="phone" label="手机号码">
                                <template v-slot="scope">
                                    <el-input v-model="scope.row.phone" placeholder="请输入手机号码" clearable
                                        prefix-icon="el-icon-mobile-phone" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <div class="form-footer">
                <el-button type="primary" icon="el-icon-check" @click="submitForm" class="submit-btn">
                    提交保存
                </el-button>
                <el-button icon="el-icon-close" @click="cancelForm" class="cancel-btn">
                    取消返回
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import clientApi from '@/api/client'

export default {
    name: 'ClientForm',
    data() {
        return {
            activeNames: ['1', '2'],
            form: {
                name: '',
                uid: '',
                address: '',
                phone: '',
                trade: '',
                business_scope: '',
                bank: '',
                bank_account: '',
                zgswjg: '',
                nsrsbh: '',
                qysdszsfs: '',
                zzsjsfs: '',
                is_ybnsr: '否',
                is_grgd: '无',
                is_sdshzns: '否',
                contacts: [
                    { name: '', appellation: '', position: '', phone: '' }
                ]
            },
            userList: [],
            rules: {
                name: [
                    { required: true, message: '请输入客户名称', trigger: 'blur' }
                ],
                uid: [
                    { required: true, message: '请选择维护人', trigger: 'change' }
                ],
                phone: [
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.loadClientData()
        this.getUidList()
    },
    methods: {
        async loadClientData() {
            const { id } = this.$route.query
            if (id) {
                try {
                    const response = await clientApi.getDetailClientInfo(id)
                    this.form = {
                        ...response.data.info,
                        contacts: response.data.info.tableData || [{ name: '', appellation: '', position: '', phone: '' }]
                    }
                } catch (error) {
                    this.$message.error('获取客户信息失败')
                    console.error(error)
                }
            }
        },

        async getUidList() {
            try {
                const response = await clientApi.getUidList()
                this.userList = response.data
            } catch (error) {
                this.$message.error('获取维护人列表失败')
                console.error(error)
            }
        },

        addContact() {
            this.form.contacts.push({
                name: '',
                appellation: '',
                position: '',
                phone: ''
            })
        },

        removeContact() {
            if (this.form.contacts.length > 1) {
                this.form.contacts.pop()
            } else {
                this.$message.warning('至少需要保留一个联系人')
            }
        },

        async submitForm() {
            try {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '提交中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })

                        try {
                            const formData = {
                                ...this.form,
                                tableData: this.form.contacts
                            }

                            const response = await clientApi.clientFrom(formData)
                            this.$message.success(response.message)
                            
                            this.$router.push({
                                path: '/client/clientIndex',
                                query: { refresh: 'true' } // 明确传递刷新标志
                            });
                        } finally {
                            loading.close()
                        }
                    } else {
                        this.$message.warning('请填写完整表单信息')
                        return false
                    }
                })
            } catch (error) {
                this.$message.error('提交失败')
                console.error(error)
            }
        },

        cancelForm() {
            this.$confirm('确定要取消吗？未保存的数据将丢失', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push('/client/clientIndex')
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.client-form-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;

    .form-card {
        border-radius: 10px;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
        border: none;

        ::v-deep .el-collapse-item__header {
            font-size: 16px;
            font-weight: bold;
            padding-left: 20px;
            height: 50px;
            line-height: 50px;
            color: #303133;
            background-color: #f8fafc;
            border-radius: 5px;
        }

        ::v-deep .el-collapse-item__wrap {
            border-bottom: none;
            background-color: #fff;
        }

        ::v-deep .el-form-item__label {
            font-weight: bold;
            color: #606266;
            padding-right: 15px;
        }

        .el-divider {
            margin: 25px 0;
        }

        .form-section {
            padding: 20px 30px;
        }
    }

    .section-title {
        display: flex;
        align-items: center;
        margin: 25px 0 15px;
        font-size: 16px;
        font-weight: bold;
        color: #409EFF;

        i {
            margin-right: 8px;
            font-size: 18px;
        }
    }

    .contact-section {
        padding: 0 30px 20px;

        .contact-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .tip-box {
                display: flex;
                align-items: center;

                i {
                    color: #409EFF;
                    margin-right: 8px;
                    font-size: 16px;
                }

                .tip-text {
                    color: #909399;
                    font-size: 14px;
                }
            }
        }

        .contact-table {
            margin-top: 15px;

            ::v-deep .el-input__inner {
                border: none;
                padding: 0 10px;
                height: 36px;
                line-height: 36px;
                background-color: transparent;
            }

            ::v-deep .el-table__header th {
                font-weight: bold;
            }

            ::v-deep .el-table__row:hover .el-input__inner {
                background-color: #f5f7fa;
            }
        }
    }

    .form-footer {
        margin-top: 30px;
        text-align: center;
        padding: 20px 0;
        border-top: 1px solid #ebeef5;

        .el-button {
            width: 150px;
            height: 40px;
            font-size: 14px;
            border-radius: 20px;
            letter-spacing: 1px;
        }

        .submit-btn {
            background: linear-gradient(90deg, #409EFF, #66b1ff);
            border: none;

            &:hover {
                background: linear-gradient(90deg, #66b1ff, #409EFF);
            }
        }

        .cancel-btn {
            color: #606266;
            border-color: #dcdfe6;

            &:hover {
                color: #409EFF;
                border-color: #c6e2ff;
                background-color: #ecf5ff;
            }
        }
    }

    .full-width-select {
        width: 100%;
    }
}
</style>